{include file="admin@public/header" /}

<link rel="stylesheet" href="/public/static/admin/easyui/layui-v2.6.8/css/layui.css">
<link href="/public/static/admin/blue/bills.css" rel="stylesheet" type="text/css">
<style>
  .ui-droplist-wrap .list-item:hover{background-color: #faffd1;}
</style>
  

<div class="wrapper">
    <div class="mod-toolbar-top mr0 cf dn" id="toolTop"></div>
    <div class="bills">
      <div class="con-header" style="padding-right:0px; ">
        <dl class="cf">
          <dd class="mr20">
            <label>单据日期：</label>
            <input type="date" id="date" class="ui-input " style="width: 130px;">
          </dd>
          <dd id="identifier" style="float:right">
            <label>单据编号:</label>
            <span id="number">HXD20210907001</span>
            <i id="editBills"></i>
            <span class="ui-combo-wrap" id="numberAuto" style="display: none;">
              <i class="trigger"></i>
            </span>
          </dd>
        </dl>
        <hr class="hrcls" />
      </div>

      <div class="wrapper_con">
          <span id="config" class="ui-config"><a href="#" class="ui-icon-config-new"></a></span>
          <div class="grid-wrap" id="billGridWrap">
            <table id="grid">
            </table>
          </div>
      </div>

      <div class="con-footer cf">
        <div class="mb10">
            <textarea type="text" id="note" class="ui-input ui-input-ph" placeholder="暂无备注信息"></textarea>
        </div>
        <div class="cf fr">
          <a href="#" class="linkToCheck ui-btn-bill ui-btn-add mr20" onclick="addPage('/money/fundtf/index.html','money_fundtf','资金转账单记录')">历史单据</a>
          <a href="#" id="operaLog" class="ui-btn fr">操作日志</a>
        </div>
      </div>
      <div class="cf" id="bottomField">
        <span id="groupBtn">
            <a id="savaAndAdd" class="ui-btn ui-btn-sp">保存并新增</a>
            <a id="save" class="ui-btn">保存</a>
            <a id="shenhe" class="ui-btn">审核</a>
        </span>
      </div>

        <div id="mark" style="bottom:120px;"></div>
      
    </div>
    <div id="initCombo" class="dn">
      <input type="text" class="textbox accountAuto" name="account" autocomplete="off">
      <input type="text" class="textbox paymentAuto" name="payment" autocomplete="off">
      <input type="text" class="textbox billAuto" name="goods" autocomplete="off">
    </div>
    <ul id="operaLogBox" class="shadow opera-log-box dn">
      <li>
        <span class="fl" style="margin-right: 50px;"><label>制单人：</label><span id="userName" style="margin-left: 12px;"><span open-data></span></span></span>
      </li>
      <li>
        <span class="fl"><label>制单时间：</label><span id="createTime"></span></span>
      </li>
      <li>
        <span class="fl"><label>最后修改人：</label><span id="modifyName" style="margin-left: 12px;"></span></span>
      </li>
      <li>
        <span class="fl"><label>最后修改时间：</label><span id="modifyTime"></span></span>
      </li>
    </ul>
  </div>
    <!--  以隐藏的方式获取商品的样式 ，作用是样式 -->
    <div id="p_settle_type_id" style="display:none;"> </div>
    <div id="p_account_id" style="display: none"></div>
    <div id="p_account_id_in" style="display: none"></div>
    <!--  以隐藏的方式获取商品的样式 ，作用是赋值 -->
    <div style="display:none;">
        <input type="text" id="settle_type_name" value="" autocomplete="off" readonly="">
        <input type="text" id="account_name" value="" autocomplete="off" readonly="">
        <input type="text" id="account_name_in" value="" autocomplete="off" readonly="">
    </div> 
    <!-- 转出账户弹窗 -->
      <div class="ui-droplist-wrap" id="account_wrap"  style="position: absolute; z-index: 1000; width: 200px;display:none;">
        <div class="droplist" id="account_list" style="position: relative; overflow: auto; min-height: 150px; height: 150px;">
          {volist name="account" id="vo"}
          <div class="list-item" account_id="{$vo.id}" title="{$vo.name}">{$vo.name}</div>
          {/volist}
        </div>
      </div>
      <!-- 转入账户弹窗 -->
      <div class="ui-droplist-wrap" id="account_wrap_in"  style="position: absolute; z-index: 1000; width: 200px;display:none;">
        <div class="droplist" id="account_list_in" style="position: relative; overflow: auto; min-height: 150px; height: 150px;">
          {volist name="account" id="vo"}
          <div class="list-item" account_id="{$vo.id}" title="{$vo.name}">{$vo.name}</div>
          {/volist}
        </div>
      </div>
    <!-- 结算方式 -->
      <div class="ui-droplist-wrap" id="settle_type_wrap"  style="position: absolute; z-index: 1000; width: 200px;display:none;">
        <div class="droplist" id="settle_type_list" style="position: relative; overflow: auto; min-height: 150px; height: 150px;">
          {volist name="settle_type" id="vo"}
          <div class="list-item" settle_type_id="{$vo.id}" title="{$vo.name}">{$vo.name}</div>
          {/volist}
        </div>
      </div>

<input type="hidden" name="id" id="id" value="{$id}">
<input type="hidden" name="sh" id="sh" value="{$sh}">
<script>
  
    $(document).ready(function () {
        // 获取当前日期
      var myDate = new Date;
      var year = myDate.getFullYear(); //获取当前年
      var mon = myDate.getMonth() + 1; //获取当前月
      var date = myDate.getDate(); //获取当前日
      // console.log(year + '-' + mon + '-' + date)
      if (mon < 10) {
        mon = "0" + mon;
      }
      if (date < 10) {
        date = "0" + date;
      }
      $("#date").val(year + '-' + mon + '-' + date);

    })

   var sh=$("#sh").val();
   if (sh==1) {
    $("#mark").attr('class','has-audit');
  }
</script>

<script>
    var edit_row = 0;
    var edit_col = 0;
    var row_id = 0;
    var col_name = 0;
    $(document).ready(function () {
        $("#grid").jqGrid({
            url: '/money/fundtf/edit.html?ajax=100&id={$id}',
            datatype: "json",//数据来源，本地数据（local，json,jsonp,xml等）
            height: '90%',//高度，表格高度。可为数值、百分比或'auto'
 			      colNames: ['', '<span class="red">*</span>转出账户','<span class="red">*</span>转入账户', '<span class="red">*</span>金额', '结算方式', '结算号', '备注'],
            colModel: [
                { name: 'id', width: 60,formatter:cLink},
                {
                  lable:"转出账户",
                  name: "account_name",
                  width: 200,
                  link: "inventory",
                  editable: true,
                  edittype: "custom",
                  editoptions: {
                  custom_element: function (t, e) {
                      $("#p_account_id").html('<div class="pr" id="account_id"><input type="text" class="textbox storageAuto customelement ui-combo-active" autocomplete="off" style="outline: -webkit-focus-ring-color auto 5px;"><span class="ui-icon-triangle-1-s" id="account_id1"></span></div>');
                      return $("#account_id");
                    },
                    custom_value: function (t, e, a) {
                      var ba = $("#account_name").val();
                      $("#account_name").val("");
                      return ba;
                    },

                    trigger: "ui-icon-triangle-1-s"
                  }
                },
                {
                  lable:"转入账户",
                  name: "account_name_in",
                  width: 200,
                  link: "inventory",
                  editable: true,
                  edittype: "custom",
                  editoptions: {
                  custom_element: function (t, e) {
                      $("#p_account_id_in").html('<div class="pr" id="account_id_in"><input type="text" class="textbox storageAuto customelement ui-combo-active" autocomplete="off" style="outline: -webkit-focus-ring-color auto 5px;"><span class="ui-icon-triangle-1-s" id="account_id1_in"></span></div>');
                      return $("#account_id_in");
                    },
                    custom_value: function (t, e, a) {
                      var ba = $("#account_name_in").val();
                      $("#account_name_in").val("");
                      return ba;
                    },

                    trigger: "ui-icon-triangle-1-s"
                  }
                },
                { name: 'money', width: 80, lable:"金额",editable: true, align:'right', editoptions: {
                    size: 25,
                    dataEvents: [
                      {
                        type: 'change',     //blur,focus,change............. 
                        fn: function (e) {
                          reload_val();
                        }
                      }
                    ]
                  }
                },
                {
                  lable:"结算方式",
                  name: "settle_type_name",
                  width: 200,
                  editable: true,
                  edittype: "custom",
                  editoptions: {
                    custom_element: function (t, e) {
                      $("#p_settle_type_id").html('<div class="pr" id="settle_type_id"><input type="text" class="textbox storageAuto customelement ui-combo-active"  autocomplete="off" style="outline: -webkit-focus-ring-color auto 5px;"><span class="ui-icon-triangle-1-s" id="settle_type_id1"></span></div>');
                      return $("#settle_type_id");
                    },
                    custom_value: function (t, e, a) {
                      var ba = $("#settle_type_name").val();
                      $("#settle_type_name").val("");
                      return ba;
                    },

                    trigger: "ui-icon-triangle-1-s"
                  }
                },
                { name: 'settlement_no', width: 150, align:'right', lable:"结算号", editable: true,},
                { name: 'remarks', width: 150, align:'right', lable:"备注", editable: true,}
            ],
            cellEdit: true,
            cellurl: '/',
            rowNum: 10,
            rowList: [10, 20, 30],
            sortname: 'id',
            sortorder: "desc",
            pagerpos: "left",//分页位置
            pgbuttons: true,//翻页按钮
            pagination: true,
            altRows: !0,
            gridview: !0,
            shrinkToFit: !1,
            cellLayout: 8,
            autowidth: !0,
            pager: "#page",
            viewrecords: !0,
            rownumbers: true, //自增序号
            cmTemplate: {
                sortable: !1,
                title: !1
            },
            loadError: function (t, e, i) {
                parent.Public.tips({
                    type: 1,
                    content: "操作失败了哦，请检查您的网络链接！"
                })
            },
            beforeEditCell: function (rowid, cellname, value, iRow, iCol) {
                col_name = cellname;
                edit_row = iRow;
                edit_col = iCol;
                row_id = rowid;
            },
            // 合计
            footerrow: true,
            gridComplete: function () {
              var columnArray = $("#grid").jqGrid('getGridParam','colModel');

              console.log(columnArray);
           
            },
        })
        var mydata = [];
        for (var i = 0; i < 5; i++) {
            var obj = { id: i + 1, goodsname: "", dw: "" ,good_id:"0",mark:""}
            mydata.push(obj);
        }
        for (var i = 0; i <= mydata.length; i++) {
            jQuery("#grid").jqGrid('addRowData', i + 1, mydata[i]);
        }

    })

    // 增加、删除按钮
	function cLink(cellvalue, options, rowObject) {
		return '<div class="operating"><span class="ui-icon ui-icon-plus" title="新增行" onclick="add()" style="margin-left:8px;"></span> <span class="ui-icon ui-icon-trash" onclick="del(' + rowObject.id + ')" style="margin-left:8px;">删除</span></div>';
	}

</script>

<script type="text/javascript">
  $(document).ready(function () {
      // 选择转出账户-弹窗
      $(".grid-wrap").on("click", "#account_id1", function (e) {
          var top = $(this).offset().top;
          var left = $(this).offset().left;
          $("#account_wrap").slideToggle();
          $("#account_wrap").css({ "top": (top + 22) + "px", "left": (left - 178) + "px" })
      })
      //选择转出账户-赋值
      $("#account_wrap #account_list").on("click", ".list-item", function (e) {
          var title = $(this).attr("title");
          //结算账户
          if (col_name == "account_name") {
              var account_id = $(this).attr("account_id");
              $("#account_name").val(title);
              $("#grid").jqGrid("setCell", row_id, 'account_id', account_id);
              $("#grid").jqGrid("setCell", row_id, 'account_name', title);//及时保存
              $("#grid").jqGrid("saveCell", edit_row, edit_col);//保存数据表格
          }
          $("#grid").saveRow(row_id, false);
          $("#account_wrap").hide();
      });
  })
   //选择转出账户-选择框外点击则隐藏
  $(document).mouseup(function (e) {
      if(e.target.id!="account_id1"){
          var con = $("#account_wrap");   // 设置目标区域
          if (!con.is(e.target) && con.has(e.target).length === 0) {
               $("#account_wrap").hide();
          }
      } 
  });


  $(document).ready(function () {
      // 选择转入账户-弹窗
      $(".grid-wrap").on("click", "#account_id1_in", function (e) {
          var top = $(this).offset().top;
          var left = $(this).offset().left;
          $("#account_wrap_in").slideToggle();
          $("#account_wrap_in").css({ "top": (top + 22) + "px", "left": (left - 178) + "px" })
      })
      //选择转入账户-赋值
      $("#account_wrap_in #account_list_in").on("click", ".list-item", function (e) {
          var title = $(this).attr("title");
          //结算账户
          if (col_name == "account_name_in") {
              var account_id = $(this).attr("account_id");
              $("#account_name_in").val(title);
              $("#grid").jqGrid("setCell", row_id, 'account_id_in', account_id);
              $("#grid").jqGrid("setCell", row_id, 'account_name_in', title);//及时保存

          }
          $("#grid").jqGrid("saveCell", edit_row, edit_col);//保存数据表格
          $("#grid").saveRow(row_id, false);
          $("#account_wrap_in").hide();
      });
  })
   //选择转入账户-选择框外点击则隐藏
  $(document).mouseup(function (e) {
      if(e.target.id!="account_id1_in"){
          var con = $("#account_wrap_in");   // 设置目标区域
          if (!con.is(e.target) && con.has(e.target).length === 0) {
               $("#account_wrap_in").hide();
          }
      } 
  });


  $(document).ready(function () {
      // 选择结算方式-弹窗
      $(".grid-wrap").on("click", "#settle_type_id1", function (e) {
          var top = $(this).offset().top;
          var left = $(this).offset().left;
          $("#settle_type_wrap").slideToggle();
          $("#settle_type_wrap").css({ "top": (top + 22) + "px", "left": (left - 178) + "px" })
      })
      //选择结算方式-赋值
      $("#settle_type_wrap #settle_type_list").on("click", ".list-item", function (e) {
          var title = $(this).attr("title");
          //结算方式
          if (col_name == "settle_type_name") {
              var settle_type_id = $(this).attr("settle_type_id");
              $("#settle_type_name").val(title);
              $("#grid").jqGrid("setCell", row_id, 'settle_type_id', settle_type_id);
              
          }
          $("#grid").jqGrid("setCell", row_id, 'settle_type_name', title);//及时保存
          $("#grid").saveRow(row_id, false);
          $("#settle_type_wrap").hide();
      });
  })
   //选择结算方式-选择框外点击则隐藏
  $(document).mouseup(function (e) {
      if(e.target.id!="settle_type_id1"){
          var con = $("#settle_type_wrap");   // 设置目标区域
          if (!con.is(e.target) && con.has(e.target).length === 0) {
               $("#settle_type_wrap").hide();
          }
      } 
  });

</script>
<script>
  function reload_val() {
    var a_rid = row_id;
    var a_c_name = col_name;
    if (a_c_name == "money") {
        // 合计的变量
        var moneys = parseFloat($("#grid").getCol('money', false, 'sum')).toFixed(2);
        $("#grid").footerData('set', {account_name: '合计：', money: moneys});

    } 
  }
</script>
<script>
    $(".wrapper").on("click", "#savaAndAdd", function (e) {
        //先保存
        if (edit_row != 0 && edit_col != 0) {
            $("#grid").jqGrid("saveCell", edit_row, edit_col);
            edit_row = 0;
            edit_col = 0;
        }
        savedata();
    })
    function savedata() {
      var grid = getJQAllData($('#grid'));
      var date = $("#date").val();
      var number = $("#number").text();
      var nu;
      var i=0;
      var edit=0;//判断是不是双击过后的
      var id=$("#id").val();
      // console.log(grid);return false;
      grid.forEach(function(e,t,b){
          delete b[i].id;
        if (b[i].account_name==''|| b[i].account_name_in=='' || b[i].money=='') {
            delete b[i];
          }
        i++;
      })
      for (var a = 0; a < grid.length; a++) {
        if (grid[a]) {
              nu=1;
              break;
            }else{
              nu=2;
            }
      }
      if(nu==1){
            $.ajax({
              type: 'POST',
              url: "add.html",
              data: {grid: grid,date:date,number:number,edit:edit,id:id},
              dataType: "json",
              async: false,
              error: function (request) {
                layer.msg("发送请求失败！");
              },
                success: function (data) {
                   if (data.cone == 1 && data.edit==1) {
                    layer.msg('编辑成功',{icon:1,time:1000});
                  }else{
                      layer.msg('编辑失败',{icon:2,time:2000});//数据处理失败时输出的内容
                  }
                  
                }
            });
          }else{
            layer.msg('至少保存一条有效分录数据！',{icon:2,time:2000});
          }
    }
    function getJQAllData(obj) {
        //拿到grid对象
        // var obj = $("#fixedGrid");
        //获取grid表中所有的rowid值
        var rowIds = obj.getDataIDs();
        //初始化一个数组arrayData容器，用来存放rowData
        var arrayData = new Array();
        if (rowIds.length > 0) {
            for (var i = 0; i < rowIds.length; i++) {
                if (Object.values(obj.getRowData(rowIds[i]))[0] != '') {
                    arrayData.push(obj.getRowData(rowIds[i]));
                }
                //rowData=obj.getRowData(rowid);//这里rowid=rowIds[i];
                // console.log(obj.getRowData(rowIds[i].goodsname));
                // return false;
                // if (obj.getRowData(rowIds[i].goodsname != '')) {
                //   arrayData.push(obj.getRowData(rowIds[i]));
                // }
            }
        }
        return arrayData;
    }
</script>
<!-- 编辑数据审核 -->
<script>
    $(".wrapper").on("click", "#shenhe", function (e) {
        //先保存
        if (edit_row != 0 && edit_col != 0) {
            $("#grid").jqGrid("saveCell", edit_row, edit_col);
            edit_row = 0;
            edit_col = 0;
        }
        savedata();
    function savedata() {
      var grid = getJQAllData($('#grid'));
      var date = $("#date").val();
      var number = $("#number").text();
      var nu;
      var i=0;
      var oid=1;
      var sh=1;
      var id=$("#id").val();
      grid.forEach(function(e,t,b){
          delete b[i].id;
        if (b[i].account_name==''|| b[i].account_name_in=='' || b[i].money=='') {
            delete b[i];
          }
        i++;
      })
      for (var a = 0; a < grid.length; a++) {
        if (grid[a]) {
              nu=1;
              break;
            }else{
              nu=2;
            }
      }
      if(nu==1){
            $.ajax({
              type: 'POST',
              url: "add.html",
              data: {grid: grid,date:date,number:number,oid:oid,sh:sh,id:id},
              dataType: "json",
              async: false,
              error: function (request) {
                layer.msg("发送请求失败！");
              },
                success: function (data) {
                  if (data.cone == 1) {
                    layer.msg('审核成功');
                    $("#mark").attr('class','has-audit');
                  } else {
                    layer.msg('账单以审核');
                  }
                }
            });
          }else{
            layer.msg('至少保存一条有效分录数据！',{icon:2,time:2000});
          }
    }
    function getJQAllData(obj) {
        //拿到grid对象
        // var obj = $("#fixedGrid");
        //获取grid表中所有的rowid值
        var rowIds = obj.getDataIDs();
        //初始化一个数组arrayData容器，用来存放rowData
        var arrayData = new Array();
        if (rowIds.length > 0) {
            for (var i = 0; i < rowIds.length; i++) {
                if (Object.values(obj.getRowData(rowIds[i]))[0] != '') {
                    arrayData.push(obj.getRowData(rowIds[i]));
                }
                //rowData=obj.getRowData(rowid);//这里rowid=rowIds[i];
                // console.log(obj.getRowData(rowIds[i].goodsname));
                // return false;
                // if (obj.getRowData(rowIds[i].goodsname != '')) {
                //   arrayData.push(obj.getRowData(rowIds[i]));
                // }
            }
        }
        return arrayData;
    }

  })
</script>
{include file="admin@public/footer" /}